/* Główne tło strony (usunąłem duplikację) */
body {
    background-image: linear-gradient(to right, #061c3c, #072c53);
    /* background-color: #061c3c; Tutaj podaj swój kolor */
}

/* Zmienne CSS dla łatwiejszej modyfikacji kolorów i intensywności */
:root {
    /* Kolory i intensywność dla blasku tekstu (czerwony neon) */
    --text-glow-color: rgba(255, 0, 0, 0.9); /* Czerwony, prawie pełne krycie */
    --text-glow-intensity-max: 0 0 20px; /* Maksymalny blask dla tekstu, np. 20px rozmycia */
    --text-glow-intensity-off: 0 0 0px; /* Blask wyłączony */

    /* Kolory i intensywność dla blasku tła modułu (niebieskie krawędzie) */
    --bg-glow-color: rgba(0, 198, 255, 0.5); /* Niebieski, 50% krycia */
    --bg-glow-intensity-max: 0 0 40px 8px; /* Max blask dla tła, większe rozmycie i spread */
    --bg-glow-intensity-off: 0 0 0px 0px; /* Blask wyłączony */
}

/* --- ANIMACJA DLA LOGO SERENIT (ZMODYFIKOWANA, ABY MOGŁA KOSYNCHRONIZOWAĆ Z INNYMI) --- */
/* Zachowałem Twoje aktualne czasy i logikę z kodu, tylko zmieniłem nazwę na bardziej unikalną,
   żeby nie było zamieszania z innymi animacjami, które też mogłyby się nazywać "pulse-glow". */
@keyframes logo-pulse-glow {
    0% {
        filter: drop-shadow(var(--text-glow-intensity-off) rgba(0, 198, 255, 0)); /* Całkowity brak blasku */
    }
    50% {
        filter: drop-shadow(0 0 2px rgba(0, 198, 255, 0.4)); /* Stopniowy, delikatny blask */
    }
    75% {
        filter: drop-shadow(0 0 14.4px rgba(0, 198, 255, 0.8)); /* Blask max 80% */
    }
    100% {
        filter: drop-shadow(var(--text-glow-intensity-off) rgba(0, 198, 255, 0)); /* Powrót do braku blasku */
    }
}

.logo-sphereit {
    animation: logo-pulse-glow 7s infinite; /* Twoje aktualne ustawienia dla logo */
}


/* --- GŁÓWNA ANIMACJA SYNCHRONIZUJĄCA LINIE TEKSTU I TŁO BANERA --- */
/* Całkowity czas cyklu to 10 sekund (Twoje aktualne ustawienie)
   Mamy 5 faz (4 linie tekstu + 1 faza dla tła), każda faza trwa 2 sekundy (10s / 5)
   W każdej fazie blask narasta w pierwszej połowie (pierwsza 1s) i wygasa w drugiej (druga 1s)
   Dla linii tekstu: 0% do 50% fazy = brak blasku, 50% do 75% = narasta, 75% do 100% = wygasa
   Czyli dla 2-sekundowej fazy, 0-1s = brak, 1-1.5s = narasta, 1.5-2s = wygasa.
*/
@keyframes full-banner-sequence {
    /* --- Faza 1: Blask na linii 1 (0s - 2s) --- */
    0% { /* Początek cyklu */
        /* Reset wszystkich efektów */
        filter: drop-shadow(var(--text-glow-intensity-off) var(--text-glow-color));
        box-shadow: var(--bg-glow-intensity-off) var(--bg-glow-color);
    }
    /* 50% fazy to 10% całkowitego czasu (0.5 * 2s / 10s = 0.1) */
    /* 75% fazy to 15% całkowitego czasu (0.75 * 2s / 10s = 0.15) */
    10% { /* Linia 1 zaczyna świecić (maksymalny blask) */
        /* Ten blok dotyczy filtra dla pierwszej linii tekstu. */
        /* Ważne: `filter` może być animowany na elemencie `animated-line` */
    }
    15% { /* Linia 1 wygasa (do 0% blasku) */
    }
    20% { /* Koniec fazy 1, linia 1 jest bez blasku */
    }

    /* --- Faza 2: Blask na linii 2 (2s - 4s) --- */
    20.01% { /* Początek fazy 2 (Linia 2) */
        filter: drop-shadow(var(--text-glow-intensity-off) var(--text-glow-color)); /* Reset dla tekstu przed startem */
    }
    30% { /* Linia 2 zaczyna świecić (maksymalny blask) */
    }
    35% { /* Linia 2 wygasa (do 0% blasku) */
    }
    40% { /* Koniec fazy 2, linia 2 jest bez blasku */
    }

    /* --- Faza 3: Blask na linii 3 (4s - 6s) --- */
    40.01% { /* Początek fazy 3 (Linia 3) */
        filter: drop-shadow(var(--text-glow-intensity-off) var(--text-glow-color));
    }
    50% { /* Linia 3 zaczyna świecić (maksymalny blask) */
    }
    55% { /* Linia 3 wygasa (do 0% blasku) */
    }
    60% { /* Koniec fazy 3, linia 3 jest bez blasku */
    }

    /* --- Faza 4: Blask na linii 4 (6s - 8s) --- */
    60.01% { /* Początek fazy 4 (Linia 4) */
        filter: drop-shadow(var(--text-glow-intensity-off) var(--text-glow-color));
    }
    70% { /* Linia 4 zaczyna świecić (maksymalny blask) */
    }
    75% { /* Linia 4 wygasa (do 0% blasku) */
    }
    80% { /* Koniec fazy 4, linia 4 jest bez blasku */
    }

    /* --- Faza 5: Blask na tle modułu (8s - 10s) --- */
    80.01% { /* Początek fazy 5 (Tło) */
        filter: drop-shadow(var(--text-glow-intensity-off) var(--text-glow-color)); /* Upewnij się, że tekst już nie świeci */
        box-shadow: var(--bg-glow-intensity-off) var(--bg-glow-color); /* Reset blasku tła przed startem */
    }
    90% { /* Tło zaczyna świecić (maksymalny blask) */
        box-shadow: var(--bg-glow-intensity-max) var(--bg-glow-color);
    }
    100% { /* Tło wygasa (do 0% blasku) i cykl się zamyka */
        box-shadow: var(--bg-glow-intensity-off) var(--bg-glow-color);
    }
}

/* --- Stylowanie i aplikowanie animacji do elementów --- */

/* Główny kontener banera - tu będzie zastosowana główna animacja pełnego cyklu */
.banner-container {
    animation: full-banner-sequence 10s infinite ease-in-out; /* CAŁA animacja trwa 10s */
    /* Twoje style tła z HTML, przeniesione tutaj dla porządku */
    background-image: url('images/BanerZ2.png');
    background-size: auto;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 0px;
    /* Domyślny stan box-shadow */
    box-shadow: var(--bg-glow-intensity-off) var(--bg-glow-color);
}

/* Stylowanie poszczególnych linii tekstu */
/* Tu zastosujemy DOMYŚLNY stan, który będzie nadpisywany przez animację.
   Potrzebujemy też selektorów dla każdej linii, aby kontrolować jej filtr w @keyframes. */
.animated-line {
    /* Domyślny stan filtra - bez blasku */
    filter: drop-shadow(var(--text-glow-intensity-off) var(--text-glow-color));
    transition: filter 0.2s ease-in-out; /* Płynne przejścia dla blasku tekstu, gdy filtr się zmienia */
}

/* Upewnij się, że styl tekstu nie jest nadpisany - kolor jest inline w HTML */
.banner-container h2,
.banner-container h3 {
    text-align: center;
    font-size: 36px;
    color: #ffffff; /* Upewnij się, że tekst jest biały */
}

/* --- Kontrolowanie filtrów dla poszczególnych linii w pełnej animacji --- */
/* Te selektory będą "łapać" moment, kiedy ich filter powinien być aktywny
   w ramach nadrzędnej animacji `full-banner-sequence`.
   Musimy nadpisać domyślny `filter: drop-shadow` w punktach animacji.
   To jest najbardziej złożona część, bo animacja na rodzicu (banner-container)
   może kolidować z animacją na dziecku (animated-line), jeśli nie jest to dobrze skoordynowane.

   Alternatywą (którą już próbujemy z `animation-delay` i się "rozjeżdża")
   jest faktycznie animowanie wewnątrz jednej @keyframes.
   To, co tutaj zrobimy, to odwołanie się do `animation-play-state` lub `animation-timing-function`
   w @keyframes, ale prostszym sposobem jest użycie selektorów wewnątrz `@keyframes`
   dla elementu, który już ma klasę.
   CSS @keyframes może animować właściwości elementu, na którym jest zdefiniowane.
   Jeśli `full-banner-sequence` jest na `.banner-container`, to nie może bezpośrednio zmieniać
   `filter` na `.animated-line`.

   **TO JEST KLUCZOWY PROBLEM.** Jedna animacja `@keyframes` na rodzicu
   nie może animować właściwości elementów potomnych.

   **Musimy wrócić do koncepcji oddzielnych animacji z opóźnieniami,
   ALE z dokładnie skoordynowanymi czasami i `animation-fill-mode`.**
   "Rozjeżdżanie się" wynika najczęściej z braku `forwards` lub `infinite` w odpowiednich miejscach,
   lub właśnie z konfliktu.
*/

/* Resetujemy wszystkie poprzednie próby synchronizacji, wracamy do zaufanej metody
   z animation-delay, ale tym razem ZPEWNIAMY, że wszystko się zamyka poprawnie i
   nie będzie konfliktów. */

/* PRZEPISANA WERSJA DLA PEŁNEJ SYNCHRONIZACJI Z ODDZIELNYMI ANIMACJAMI */

/* --- Animacja dla pojedynczej linii tekstu (Czerwony Neon) --- */
@keyframes line-glow-red {
    0% {
        filter: drop-shadow(var(--text-glow-intensity-off) var(--text-glow-color)); /* Brak blasku */
    }
    50% { /* Od 50% czasu trwania tej animacji */
        filter: drop-shadow(var(--text-glow-intensity-off) var(--text-glow-color)); /* Nadal brak blasku */
    }
    75% { /* Do 75% czasu trwania tej animacji - narastanie */
        filter: drop-shadow(var(--text-glow-intensity-max) var(--text-glow-color)); /* Narastanie do maksa */
    }
    100% { /* Do 100% czasu trwania tej animacji - wygasanie */
        filter: drop-shadow(var(--text-glow-intensity-off) var(--text-glow-color)); /* Wygasanie do zera */
    }
}

/* --- Animacja dla blasku tła kontenera (Niebieskie Krawędzie) --- */
@keyframes banner-background-glow-blue {
    0% {
        box-shadow: var(--bg-glow-intensity-off) var(--bg-glow-color); /* Brak blasku tła */
    }
    50% { /* Start narastania po 50% czasu trwania tej animacji */
        box-shadow: var(--bg-glow-intensity-off) var(--bg-glow-color);
    }
    75% { /* Do 75% czasu trwania tej animacji - narastanie */
        box-shadow: var(--bg-glow-intensity-max) var(--bg-glow-color); /* Narastanie do maksa */
    }
    100% { /* Do 100% czasu trwania tej animacji - wygasanie */
        box-shadow: var(--bg-glow-intensity-off) var(--bg-glow-color); /* Wygasanie do zera */
    }
}


/* Klasa dla animowanych linii tekstu */
.animated-line {
    /* Ustawimy duration i delay bezpośrednio w selektorach poniżej dla precyzji */
    animation-name: line-glow-red;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards; /* Utrzymuje stan końcowy, ważny dla opóźnień */
    filter: drop-shadow(var(--text-glow-intensity-off) var(--text-glow-color)); /* Stan początkowy bez blasku */
}

/* Animacja dla całego kontenera (tła) */
.banner-container {
    animation-name: banner-background-glow-blue;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    /* Domyślny stan box-shadow */
    box-shadow: var(--bg-glow-intensity-off) var(--bg-glow-color);

    /* Twoje style tła z HTML, przeniesione tutaj dla porządku */
    background-image: url('images/BanerZ2.png');
    background-size: auto;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 0px;
}

/* Opóźnienia i CZASY TRWANIA dla poszczególnych elementów - Całkowity cykl 10 sekund */
/* Każda z 5 faz (4 linie + 1 tło) będzie trwała dokładnie 2 sekundy */
/* Animacja dla każdego elementu ma trwać 2 sekundy, startując w swoim slocie */

.banner-container h2:nth-of-type(1) { /* Linia 1 */
    animation-duration: 2s; /* Jej animacja trwa 2s */
    animation-delay: 0s; /* Startuje od razu */
}

.banner-container h3:nth-of-type(1) { /* Linia 2 (pierwsze h3) */
    animation-duration: 2s;
    animation-delay: 2s; /* Startuje po 2s (gdy Linia 1 skończy) */
}

.banner-container h3:nth-of-type(2) { /* Linia 3 (drugie h3) */
    animation-duration: 2s;
    animation-delay: 4s; /* Startuje po 4s (gdy Linia 2 skończy) */
}

.banner-container h3:nth-of-type(3) { /* Linia 4 (trzecie h3) */
    animation-duration: 2s;
    animation-delay: 6s; /* Startuje po 6s (gdy Linia 3 skończy) */
}

.banner-container { /* Tło modułu */
    animation-duration: 2s; /* Animacja tła trwa 2s */
    animation-delay: 8s; /* Startuje po 8s (gdy Linia 4 skończy) */
    /* WAŻNE: Tutaj zmieniamy nazwę animacji tła, żeby nie było zamieszania */
    animation-name: banner-background-glow-blue;
    /* A cały cykl animacji banera, aby się powtarzało, ustawimy na samym końcu */
    /* To `banner-container` jest tym, co ma trwać 10s i powtarzać się.
       W tym scenariuszu, musimy zastosować sprytne rozwiązanie dla cyklu.
       Najpewniejsze jest, aby `banner-container` miał całkowitą animację
       tylko z `animation-iteration-count: infinite`, a poszczególne elementy
       były synchronizowane przez `animation-delay` względem **całkowitego cyklu**.
    */
}

/* Globalna animacja cyklu dla kontenera, aby wszystko się zapętlało */
.banner-container {
    /* Tu ustawiamy całkowity czas trwania cyklu i powtarzanie,
       ale bez specyficznej nazwy animacji, którą mogłaby nadpisać */
    /* To jest trochę tricky, bo `animation` to skrócony zapis.
       Lepiej jest zdefiniować oddzielnie `animation-name`, `duration` itp.
       dla każdej z animacji, a `banner-container` będzie pełnił rolę
       "orchestratora" dla swojego własnego cienia.
    */
    /* Zatem, wracamy do podejścia, gdzie każda animacja ma swoją nazwę i jest przypisana.
       Problemy z synchronizacją wynikały z niedokładnych opóźnień lub kolizji.
       Teraz opóźnienia będą sumować się do 10s cyklu. */
    animation-duration: 10s; /* Całkowity czas cyklu dla tła */
    animation-name: banner-background-glow-blue; /* Nazwa animacji dla tła */
    animation-delay: 8s; /* Tło startuje po 8s */
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

/* Upewnij się, że styl tekstu nie jest nadpisany przez animacje */
.banner-container h2 span,
.banner-container h3 span,
.banner-container h2 strong {
    color: #ffffff; /* Zapewnij biały kolor tekstu */
    font-size: 36px; /* Zapewnij rozmiar czcionki */
}


/* Definicja animacji jednorazowego "zapłonu" na start strony */
@keyframes initial-glow {
    0% {
        filter: drop-shadow(0 0 0px rgba(0, 198, 255, 0));
        opacity: 0.8;
    }
    100% {
        filter: drop-shadow(0 0 40px rgba(0, 198, 255, 0.5));
        opacity: 1;
    }
}

/* Styl dla głównego kontenera Flexbox menu */
.main-menu-flex-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: nowrap; /* KLUCZOWA ZMIANA: ZAWSZE nowrap, aby nie zawijało */
    padding: 5px 0;
    width: 70%; /* Możesz zwiększyć do 90-100% dla lepszego wykorzystania miejsca na małych ekranach */
    margin: 0 auto;
}

/* Opcjonalnie: Responsywność dla mniejszych ekranów */
/* ZMIANA: Usunięcie flex-wrap: wrap; tutaj, aby zawsze były w jednej linii */
@media (max-width: 768px) {
    .main-menu-flex-container {
        width: 95%; /* Zwiększenie szerokości na małych ekranach */
        /* flex-wrap: wrap; - USUNIĘTO - NIE CHCEMY, ŻEBY SIĘ ZAWIAŁO */
        justify-content: center; /* nadal centrowanie */
        padding: 5px 0;
    }
}

/* Styl dla pojedynczego elementu menu (linku <a> z obrazkiem) */
.menu-button-link {
    display: block;
    text-align: center;
    flex: 1 1 auto; /* Umożliwia elementom elastyczne kurczenie się i rozciąganie */
    margin: 0 5px;
    min-width: 50px; /* KLUCZOWA ZMIANA: Dodajemy minimalną szerokość, aby nie stały się niewidoczne */
                   /* Dostosuj tę wartość! Może 60px, 70px, w zależności od obrazków */
    transition: transform 0.3s ease-in-out;
}

/* Styl dla obrazka w linku */
.menu-button-img {
    max-width: 100%;
    height: auto;
    max-height: 60px; /* Ograniczenie maksymalnej wysokości, by menu nie było za duże */
    display: block;
    margin: 0 auto;

    animation: initial-glow 3s forwards ease-out;
    filter: drop-shadow(0 0 40px rgba(0, 198, 255, 0.5));
    transition: filter 1s ease-in-out, transform 0.3s ease-in-out;
}

/* Styl dla efektu HOVER (gdy najedziesz myszką na przycisk) */
.main-menu-flex-container .menu-button-link:hover .menu-button-img {
    filter: drop-shadow(0 0 40px rgba(0, 198, 255, 1)) !important;
    transform: scale(1.05);
    transition: filter 1s ease-in-out !important, transform 0.3s ease-in-out !important;
}

/* Styl dla efektu ACTIVE (gdy klikniesz przycisk) */
.main-menu-flex-container .menu-button-link:active .menu-button-img {
    transform: scale(0.95);
    filter: drop-shadow(0 0 10px rgba(0, 198, 255, 0.8));
    transition: transform 0.1s ease-out, filter 0.1s ease-out;
}

/* --- Style dla Animowanej Strzałki i Listy Kontaktowej --- */

/* Główny kontener dla całej sekcji kontaktowej */
.contact-animation-container {
    display: flex;
    justify-content: center; /* Centruje contact-wrapper na stronie */
    align-items: flex-start;
    position: relative; /* Daje kontekst dla ewentualnych przyszłych absolutnych pozycji */
    width: 100%;
    max-width: 550px; /* Zwiększamy max-width, żeby pomieścić wyśrodkowany tekst + strzałkę */
    margin: 20px auto;
    padding: 0 10px;
}

/* NOWY KONTENER: Obejmuje listę tekstów i animowaną strzałkę */
.contact-wrapper {
    display: flex; /* Ustawiamy Flexbox, aby lista i strzałka były obok siebie */
    flex-direction: row; /* Domyślnie, ale dla jasności */
    align-items: flex-start; /* Elementy wyrównane do góry */
    position: relative; /* KLUCZOWA ZMIANA: To jest teraz kontener referencyjny dla absolutnej strzałki */
    width: auto; /* Pozwalamy wrapperowi dostosować szerokość do zawartości */
    justify-content: center; /* Centruje listę i strzałkę wewnątrz wrapper'a */
}


/* Lista z danymi kontaktowymi */
.contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* Ustawia elementy jeden pod drugim */
    align-items: flex-start; /* Wyrównuje całe linki (ikona+tekst) do lewej */
    width: auto; /* Pozwalamy liście dostosować szerokość do zawartości */
    line-height: 60px; /* Referencyjna wysokość wiersza */
    text-align: center; /* Centrowanie tekstu w poziomie wewnątrz listy (to zadziała na span) */
    padding-right: 50px; /* Dodatkowe miejsce po prawej na strzałkę */
    padding-left: 0; /* Zapewniamy brak paddingu po lewej */
}

/* Styl dla każdego elementu listy (linii kontaktowej) */
.contact-list li {
    padding: 0; /* Usunięty padding */
    color: #ffffff;
    font-size: 24px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    white-space: nowrap; /* Zachowujemy nowrap dla tekstu listy */
    height: 60px; /* Stała wysokość każdego wiersza li */
    line-height: inherit; /* Dziedziczy line-height z .contact-list (czyli 60px) */
    display: flex; /* Używamy flexboxa, aby `li` dobrze ogarnęło `a` */
    align-items: center; /* Centruje link `a` w pionie w obrębie `li` */
    justify-content: flex-start; /* Wyrównuje link `a` do lewej */
}

/* Styl dla linków w listach */
.contact-list li a {
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center; /* Centruje ikonę i tekst w pionie */
    justify-content: flex-start; /* Wyrównuje ikonę i tekst do lewej */
    width: 100%; /* Link zajmuje całą dostępną szerokość w li */
    height: 100%; /* Sprawiamy, że link wypełnia całe li (60px) */
}

/* Styl dla ikon w listach (phone.gif, whatsapp.gif, envelope.gif, email.gif) */
.contact-list li .contact-icon {
    margin-right: 10px; /* Odstęp między ikoną a tekstem */
    width: 60px; /* Upewnij się, że ikony mają tę samą szerokość */
    height: 60px; /* Ustawiamy stałą wysokość ikony na 60px */
    flex-shrink: 0; /* Zapobiega zmniejszaniu się ikony na małych ekranach */
    object-fit: contain; /* Zapewnia, że obrazek będzie skalowany, by zmieścić się w polu 60x60 bez ucinania */
}

/* Styl dla tekstu w listach (teraz wewnątrz span) */
.contact-list li a .contact-text {
    text-align: center; /* Centrowanie tekstu wewnątrz swojego span */
    flex-grow: 1; /* Pozwala tekstowi zająć resztę dostępnego miejsca */
    white-space: nowrap; /* Utrzymujemy tekst w jednej linii, chyba że media query to zmieni */
}


/* Styl dla animowanej strzałki z teksem "masz pytania? kliknij!" */
.animated-arrow {
    position: absolute; /* Absolutnie pozycjonowana względem .contact-wrapper */
    right: 0; /* Ustawiamy na prawej krawędzi .contact-wrapper */
    top: 0; /* Zaczynamy od góry .contact-wrapper */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center; /* Centruj strzałkę w pionie w jej linii (niezależnie od translateY) */
    justify-content: flex-start; /* Strzałka, potem tekst "masz pytania? kliknij!" */
    white-space: nowrap; /* Domyślnie nowrap */
    
    animation: moveArrow 8s infinite ease-in-out;
    animation-delay: 0.2s;
    z-index: 2;
}

.animated-arrow img {
    height: 100%;
    width: auto;
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
    animation: pulseScale 1s infinite alternate ease-in-out;
}

/* Nowy selektor dla tekstu strzałki */
.animated-arrow .animated-arrow-text {
    margin-left: 10px; /* Zwiększamy odstęp od strzałki */
    color: #ffffff; /* Kolor tekstu "kliknij" na biały */
    font-weight: normal; /* Cofnięte pogrubienie */
    font-size: 24px; /* Przeniesione z inline, było 0.9em, ale w HTML miałeś 24px */
}


/* Definicja animacji ruchu strzałki - KLUCZOWA ZMIANA! */
/* Teraz bazujemy na stałej wysokości linii 60px (wysokość li)
   Punkt startowy: 
   Celem jest środek 60-pikselowej ikony/wiersza, czyli 30px.
   Strzałka ma 40px wysokości, więc jej środek jest na 20px.
   Aby środek strzałki (na 20px) pokrył się ze środkiem wiersza (na 30px),
   strzałka musi się przesunąć o 30px - 20px = 10px w dół.
   Czyli start animacji to 10px.
*/
@keyframes moveArrow {
    0% { transform: translateY(11px); } /* Start: Środek strzałki na środku pierwszej linii */
    20% { transform: translateY(11px); }

    /* Linia 2 (SMS) - 1*60px przesunięcia od punktu startowego */
    25% { transform: translateY(calc(11px + 1 * 60px)); }
    45% { transform: translateY(calc(11px + 1 * 60px)); }

    /* Linia 3 (WhatsApp) - 2*60px przesunięcia od punktu startowego */
    50% { transform: translateY(calc(11px + 2 * 60px)); }
    70% { transform: translateY(calc(11px + 2 * 60px)); }

    /* Linia 4 (Email) - 3*60px przesunięcia od punktu startowego */
    75% { transform: translateY(calc(11px + 3 * 60px)); }
    95% { transform: translateY(calc(11px + 3 * 60px)); }

    100% { transform: translateY(11px); }
}

/* Definicja animacji pulsowania strzałki (skalowanie + mniejszy, niebieski cień) */
@keyframes pulseScale {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
    }
    100% {
        transform: scale(1.75);
        filter: drop-shadow(0 0 4px rgba(100, 149, 237, 1));
    }
}

/* Media Queries dla responsywności (dostosowanie rozmiarów na mniejszych ekranach) */
@media (max-width: 768px) {
    .contact-animation-container {
        max-width: 95%;
        padding: 0 5px;
    }
    .contact-wrapper {
        align-items: flex-start;
    }
    .contact-list {
        padding-right: 40px;
        line-height: 30px; /* Wysokość linii na mobilnym */
    }
    .contact-list li {
        font-size: 1.0em;
        height: 30px; /* Wysokość wiersza na mobilnym */
    }
    .contact-list li .contact-icon {
        width: 30px;
        height: 30px; /* Zmniejszamy ikony na mobilnych */
    }
    .contact-list li a .contact-text {
        white-space: normal;
        text-align: left;
    }
    .animated-arrow {
        width: 30px; /* Zmniejszona szerokość strzałki */
        height: 30px; /* Zmniejszona wysokość strzałki */
        white-space: normal;
    }
    .animated-arrow-text {
        margin-left: 8px;
        font-size: 0.7em;
        line-height: 1.2;
    }

    /* Definicja animacji ruchu strzałki dla mobilnych - KLUCZOWA ZMIANA!
       Strzałka ma 30px wysokości, więc jej środek jest na 15px.
       Celem jest środek 30-pikselowego wiersza/ikony, czyli 15px.
       Więc początkowe przesunięcie to 15px - 15px = 0px.
       Strzałka powinna startować na 0px, jeśli jej `top` jest 0.
    */
    @keyframes moveArrow {
        0% { transform: translateY(0px); } /* Start w środku pierwszej linii mobilnej */
        20% { transform: translateY(0px); }

        /* Linia 2 (SMS) - 1*30px przesunięcia */
        25% { transform: translateY(calc(0px + 1 * 30px)); }
        45% { transform: translateY(calc(0px + 1 * 30px)); }

        /* Linia 3 (WhatsApp) - 2*30px przesunięcia */
        50% { transform: translateY(calc(0px + 2 * 30px)); }
        70% { transform: translateY(calc(0px + 2 * 30px)); }

        /* Linia 4 (Email) - 3*30px przesunięcia */
        75% { transform: translateY(calc(0px + 3 * 30px)); }
        95% { transform: translateY(calc(0px + 3 * 30px)); }

        100% { transform: translateY(0px); }
    }
    /* Dla mobilnych również dostosowujemy cień */
    @keyframes pulseScale {
        0% {
            transform: scale(1);
            filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
        }
        100% {
            transform: scale(1.75);
            filter: drop-shadow(0 0 3px rgba(100, 149, 237, 1));
        }
    }

    /* NOWA MEDIA QUERY dla BARDZO MAŁYCH EKRANÓW (poniżej ~380px) */
    @media (max-width: 380px) {
        .animated-arrow-text {
            font-size: 0.6em;
            margin-left: 5px;
        }
        .contact-list {
            padding-right: 35px;
            line-height: 25px;
        }
        .contact-list li {
            height: 25px;
        }
        .contact-list li .contact-icon {
            width: 25px;
            height: 25px;
        }
        .animated-arrow {
            width: 25px;
            height: 25px;
        }
        /* Definicja animacji ruchu strzałki dla bardzo małych ekranów
           Strzałka ma 25px wysokości, więc jej środek jest na 12.5px.
           Celem jest środek 25-pikselowego wiersza/ikony, czyli 12.5px.
           Więc początkowe przesunięcie to 12.5px - 12.5px = 0px.
        */
        @keyframes moveArrow {
            0% { transform: translateY(0px); }
            20% { transform: translateY(0px); }
            25% { transform: translateY(calc(0px + 1 * 25px)); }
            45% { transform: translateY(calc(0px + 1 * 25px)); }
            50% { transform: translateY(calc(0px + 2 * 25px)); }
            70% { transform: translateY(calc(0px + 2 * 25px)); }
            75% { transform: translateY(calc(0px + 3 * 25px)); }
            95% { transform: translateY(calc(0px + 3 * 25px)); }
            100% { transform: translateY(0px); }
        }
    }
}

/* ... (Twój istniejący, poprawiony kod CSS do .contact-list i animacji strzałki) ... */

/* --- Nowe animacje dla ikon --- */

/* --- Poprawione animacje dla ikon - aktywność przesunięta na drugą ćwiartkę --- */

/* 1) Animacja "wibracji" dla ikony telefonu - START NA DRUGĄ ĆWIARTKĘ */
@keyframes vibrate {
    /* Bezruch na pierwszą ćwiartkę (0-5% z 8s, czyli 0-0.4s) */
    0%, 5% { transform: translateX(0); }

    /* Aktywna część (od 5.1% do 20% z 8s, czyli 0.4s-1.6s) */
    /* Drganie ma trwać od 0.4s do 1.2s (8% z 8s), potem postój do 1.6s (20% z 8s) */
    5.1% { transform: translateX(-2px); } /* Szybkie drganie */
    6.1% { transform: translateX(2px); }
    7.1% { transform: translateX(-2px); }
    8.1% { transform: translateX(2px); }
    9.1% { transform: translateX(0); } /* Pauza 1 (po ok. 0.8s) */

    10.1% { transform: translateX(-2px); }
    11.1% { transform: translateX(2px); }
    12.1% { transform: translateX(-2px); }
    13.1% { transform: translateX(2px); }
    14.1% { transform: translateX(0); } /* Koniec 2. wibracji (po ok. 1.2s) */

    /* Pauza do końca aktywnej fazy (od 14.1% do 20% czasu trwania animacji ikony) */
    14.2%, 20% { transform: translateX(0); }

    /* Długa pauza (od 20.1% do 100% cyklu, gdy strzałka jest gdzie indziej) */
    20.1%, 100% { transform: translateX(0); }
}

/* 2) Animacja "podskoku" dla ikony koperty (SMS) - START NA DRUGĄ ĆWIARTKĘ */
@keyframes bounce {
    /* Bezruch na pierwszą ćwiartkę (0-5% z 8s, czyli 0-0.4s) */
    0%, 5% { transform: translateY(0); }

    /* Aktywna część (od 5.1% do 20% z 8s, czyli 0.4s-1.6s) */
    /* Podskoki mają zająć 1/2 czasu strzałki w linii (0.8s) od momentu startu (0.4s), czyli do 1.2s (15% z 8s).
       Potem 0.4s postoju (do 1.6s czyli 20%). */
    5.1% { transform: translateY(0); }
    7.6% { transform: translateY(-8px); } /* Szybszy podskok do góry (po 0.6s) */
    10.1% { transform: translateY(0); } /* Szybszy powrót na dół (po 0.8s) */
    12.6% { transform: translateY(-4px); } /* Szybszy mniejszy podskok (po 1.0s) */
    15.1% { transform: translateY(0); } /* Szybszy powrót na dół (po 1.2s) */

    /* Długa pauza (od 15.1% do 100% cyklu) */
    15.2%, 100% { transform: translateY(0); }
}

/* 3) Animacja "klikania" dla ikony WhatsApp - BEZ ZMIAN (JEST SPOKO) */
@keyframes clickEffect {
    /* Aktywna część (pierwsze 20% z 8s, czyli 0-1.6s) */
    0%, 5% { transform: scale(1); }

    5.1% { transform: scale(1); }
    7.5% { transform: scale(0.9); }
    10% { transform: scale(1); }

    /* Długa pauza (od 10.1% do 100% cyklu) */
    10.1%, 100% { transform: scale(1); }
}

/* 4) Animacja "obrotu" dla ikony maila - START NA DRUGĄ ĆWIARTKĘ, OBRÓT NA 3/4 CZASU */
@keyframes spin {
    /* Bezruch na pierwszą ćwiartkę (0-5% z 8s, czyli 0-0.4s) */
    0%, 5% { transform: rotateY(0deg); }

    /* Aktywna część (od 5.1% do 20% z 8s, czyli 0.4s-1.6s) */
    /* Jeden obrót przez 3/4 czasu aktywnego, czyli 3/4 z 1.6s = 1.2s.
       Start od 0.4s, więc koniec obrotu na 0.4s + 1.2s = 1.6s.
       To oznacza, że obrót dzieje się od 5% do 20% z 8s cyklu. */
    5.1% { transform: rotateY(0deg); }
    20% { transform: rotateY(360deg); } /* Jeden pełny obrót, kończy się z aktywną fazą strzałki */

    /* Długa pauza (od 20.1% do 100% cyklu) */
    20.1%, 100% { transform: rotateY(360deg); }
}


/* Przypisanie animacji do odpowiednich ikon - TE DEKLARACJE BEZ ZMIAN */

/* Telefon (pierwszy element li) */
.contact-list li:nth-child(1) .contact-icon {
    animation: vibrate 8s ease-in-out infinite;
    animation-delay: 0s;
}

/* SMS (drugi element li) */
.contact-list li:nth-child(2) .contact-icon {
    animation: bounce 8s ease-in-out infinite;
    animation-delay: 2s;
}

/* WhatsApp (trzeci element li) */
.contact-list li:nth-child(3) .contact-icon {
    animation: clickEffect 8s ease-in-out infinite;
    animation-delay: 4s;
}

/* Email (czwarty element li) */
.contact-list li:nth-child(4) .contact-icon {
    animation: spin 8s linear infinite;
    animation-delay: 6s;
}

/* Styl dla tekstu "masz pytania ? kliknij !" - POPRAWIONY SELEKTOR */
.animated-arrow .animated-arrow-text {
    /* Używamy inline-block, aby transform działał prawidłowo na elemencie inline,
       jeśli jeszcze nie jest tak ustawiony. Sprawdziłem i już masz go w definicji
       .animated-arrow-text, więc to jest tylko dla pewności i jasności. */
    display: inline-block;
    
    /* Podnosimy tekst o kilka pikseli w górę.
       Wartość -4px to dobry punkt wyjścia dla "połowy wysokości małej litery 'm'".
       Poprzednio miałeś -20px, co mogłoby być za dużo. Zacznijmy od -4px,
       a jeśli trzeba będzie, zwiększymy tę wartość (np. -6px, -8px). */
    transform: translateY(-4px); 
}